<template>
 <div class="circle">
 	<svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" >
 		<circle class="background" r='50' cx='50' cy='50' fill="transparent"></circle>
 		<circle class="ring" r='50' cx='50' cy='50' fill="transparent"
 		:stroke-dasharray="dashArray"
        :stroke-dashoffset="dashOffset">
 		</circle>
 	</svg>
 	<slot></slot>
 </div>
</template>

<script type="text/ecmascript-6">
export default{
  name:'',
  props:{
  	radius:{
  		type:Number,
  		default:100
  	},
  	percent: {
        type: Number,
        default: 0
      }
  },
  data() {
      return {
        dashArray: Math.PI * 100
      }
    },
  computed: {
		// 路径*比例
      dashOffset() {
        return (1 - this.percent) * this.dashArray
      }
    }
}
</script>

<style rel="stylesheet" lang="less">
   .circle{
   	position: relative;
   	width: 30px;
   	height: 30px;
   	circle{
   		  stroke-width: 8px;
      transform-origin: center;
   	}
   	.background{
   		transform:scale(0.9);
   		stroke: rgba(255, 205, 49, 0.5);
   	}
   	.ring{
   		transform: scale(0.9) rotate(-90deg);
		stroke: #ffcd32;
   	}
   }
</style>
